<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>弘源海购-首页(仿)</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet/less" href="./css/reset.less">
  <link rel="stylesheet/less" href="./css/common.less">
  <link rel="stylesheet/less" href="./css/tabbar.less">
  <link rel="stylesheet/less" href="./css/home.less">
  <link rel="stylesheet/less" href="./css/home_download.less">
  <link rel="stylesheet/less" href="./css/home_search.less">
  <link rel="stylesheet/less" href="./css/home_recommend.less">
  <link rel="stylesheet/less" href="./css/home_subsidy.less">
  <link rel="stylesheet/less" href="./css/home_subsidy.less">
  <link rel="stylesheet/less" href="./css/home_category.less">
  <link rel="stylesheet/less" href="./css/home_product.less">
  <script src="./js/lessc.js"></script>
</head>
<body>
  
  <!-- tabbar -->
  <div class="tabbar">
    <div class="item">
      <img src="./img/tabbar_home_active.png" alt="">
    </div>
    <div class="item">
      <img src="./img/tabbar_category.png" alt="">
    </div>
    <div class="item">
      <img src="./img/tabbar_cart.png" alt="">
    </div>
    <div class="item">
      <img src="./img/tabbar_profile.png" alt="">
    </div>
  </div>

  <div class="home">
    <!-- 下载部分 -->
    <div class="download">
      <div class="left">
        <a class="logo" href="#">
          <img src="./img/logo.png" alt="">
        </a>
        <div class="info">
          <div class="title">【考拉海购】官方自营 正品保障</div>
          <div class="desc">下载APP新人可享125元购物礼包</div>
        </div>
      </div>
      <a class="right" href="#">打开APP</a>
    </div>

    <!-- 搜索功能 -->
    <div class="search">
      <div class="bar">
        <div class="placeholder">
          在千万海外商品中搜索
        </div>
      </div>
      <div class="login">登录/注册</div>
    </div> 

    <!-- 推荐区域 -->
    <div class="recommend">
      <div class="item">
        <img src="./img/recommend_01.png" alt="">
      </div>
      <div class="item">
        <img src="./img/recommend_02.png" alt="">
      </div>
      <div class="item">
        <img src="./img/recommend_03.png" alt="">
      </div>
      <div class="item">
        <img src="./img/recommend_04.png" alt="">
      </div>
      <div class="item">
        <img src="./img/recommend_05.png" alt="">
      </div>
    </div>

    <!-- 补贴区域 -->
    <div class="subsidy">
      <div class="header">
        <div class="left">
          <img src="./img/subsidy.png" alt="">
          <div class="countdown">
            <span class="time">03</span>
            <span class="split">:</span>
            <span class="time">24</span>
            <span class="split">:</span>
            <span class="time">33</span>
          </div>
        </div>
        <div class="right">
          大牌底价补贴
        </div>
      </div>
      <div class="list">
        <div class="item">
          <img src="./img/subsidy_01.png" alt="">
          <div class="price">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="count">946</span>
            </div>
            <div class="old">¥2833</div> 
          </div>
        </div>
        <div class="item">
          <img src="./img/subsidy_02.jpg" alt="">
          <div class="price">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="count">946</span>
            </div>
            <div class="old">¥2833</div> 
          </div>
        </div>
        <div class="item">
          <img src="./img/subsidy_03.jpg" alt="">
          <div class="price">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="count">946</span>
            </div>
            <div class="old">¥2833</div> 
          </div>
        </div>
        <div class="item">
          <img src="./img/subsidy_04.png" alt="">
          <div class="price">
            <div class="new">
              硬核价
              <span class="unit">¥</span>
              <span class="count">946</span>
            </div>
            <div class="old">¥2833</div> 
          </div>
        </div>
      </div>
    </div> 

    <!-- 类别区域 -->
    <div class="category">
      <div class="item">
        <div class="title">精选</div>
        <div class="desc">猜你喜欢</div>
      </div>
      <div class="item">
        <div class="title">特惠</div>
        <div class="desc">多买多省</div>
      </div>
      <div class="item">
        <div class="title">美妆</div>
        <div class="desc">魅力装扮</div>
      </div>
      <div class="item">
        <div class="title">母婴</div>
        <div class="desc">家有萌宝</div>
      </div>
      <div class="item active">
        <div class="title">数码</div>
        <div class="desc">酷玩科技</div>
      </div>
    </div> 

    <!-- 商品列表 -->
    <div class="product">
      <div class="item">
        <img src="./img/product_01.jpg" alt="">
        <div class="info">
          <div class="company">索尼</div>
          <div class="desc">
            Sony索尼 PlayStation5主机PS5游戏机 日版
          </div>
          <div class="tags discount">
            <div class="tag ticket">满25减1</div>
            <div class="tag">限时特卖</div>
          </div>
          <div class="price">
            优惠价¥ <span class="money">4899</span>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="./img/product_02.jpg" alt="">
        <div class="info">
          <div class="company">Apple</div>
          <div class="desc">
            Sony索尼 PlayStation5主机PS5游戏机 日版
          </div>
          <div class="tags discount">
            <div class="tag">限时特卖</div>
          </div>
          <div class="price">
            优惠价¥ <span class="money">4899</span>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="./img/product_03.jpg" alt="">
        <div class="info">
          <div class="company">索尼</div>
          <div class="desc">
            Sony索尼 PlayStation5主机PS5游戏机 日版
          </div>
          <div class="tags discount">
          </div>
          <div class="price">
            优惠价¥ <span class="money">4899</span>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="./img/product_04.jpg" alt="">
        <div class="info">
          <div class="company">索尼</div>
          <div class="desc">
            Sony索尼 PlayStation5主机PS5游戏机 日版
          </div>
          <div class="tags discount">
            <div class="tag ticket">满25减1</div>
            <div class="tag">限时特卖</div>
          </div>
          <div class="price">
            优惠价¥ <span class="money">4899</span>
          </div>
        </div>
      </div>
    </div> 
  </div>

</body>
</html>